

import './time-word.less';
import { getNowFormatDate, getOffsiteDate } from '@/utils/time'
import { useState } from "react";

const TimeWord: React.FC<React.HTMLProps<Element>> = (props) => {
    // props.type style1 世界时间图标类型 style2世界时间列表
    const [minutes, setminutes] = useState(getNowFormatDate('mm'));
    const [hour, sethour] = useState(getNowFormatDate('hh'));
    const [sec, setsec] = useState(getNowFormatDate('ss'));
    const [LondonDate, setLondonDate] = useState(getOffsiteDate('Europe/London'))
    const [ParisDate, setParisDate] = useState(getOffsiteDate('Europe/Paris'))
    const [NewYorkDate, setNewYorkDate] = useState(getOffsiteDate('America/New_York'))

    setInterval(() => {
        setminutes(getNowFormatDate('mm'))
        sethour(getNowFormatDate('hh'))
        setsec(getNowFormatDate('ss'))
        setLondonDate(getOffsiteDate('Europe/London'))
        setParisDate(getOffsiteDate('Europe/Paris'))
        setNewYorkDate(getOffsiteDate('America/New_York'))
    }, 1000)
    return (
        <div>
            {
                props.type === 'style1' &&
                <div className='time_word_style1'>
                    <div className="time_word_style1_list">
                        <h4>{hour}:{minutes}</h4>
                        <p>北京</p>
                    </div>
                    <div className="time_word_style1_list">
                        {/* <h4>{hour}:{minutes}</h4> */}
                        <h4>{LondonDate}</h4>
                        <p>英国</p>
                    </div>
                    <div className="time_word_style1_list">
                        {/* <h4>{hour}:{minutes}</h4> */}
                        <h4>{ParisDate}</h4>
                        <p>法国</p>
                    </div>
                    <div className="time_word_style1_list">
                        {/* <h4>{hour}:{minutes}</h4> */}
                        <h4>{NewYorkDate}</h4>
                        <p>美国</p>
                    </div>
                    <div className="time_word_style1_center"></div>
                </div>
            }
            {
                props.type === 'style2' &&
                <div className='time_word_style2'>
                    <div className='time_word_style2_list'>
                        <div className='time_word_style2_watch'>
                            <div className="hour" style={{ 'transform': `rotate(${(+hour + (+minutes + +sec / 60) / 60) * 30}deg)` }}></div>
                            <div className="min" style={{ 'transform': `rotate(${(+minutes + +sec / 60) * 6}deg)` }}></div>
                            <div className="sec" style={{ 'transform': `rotate(${sec * 6}deg)` }}></div>
                        </div>
                        <h4>{hour}:{minutes}</h4>
                        <p>北京</p>
                    </div>
                    <div className='time_word_style2_list'>
                        <div className='time_word_style2_watch'>
                            <div className="hour" style={{ 'transform': `rotate(${(+hour + (+minutes + +sec / 60) / 60) * 30}deg)` }}></div>
                            <div className="min" style={{ 'transform': `rotate(${(+minutes + +sec / 60) * 6}deg)` }}></div>
                            <div className="sec" style={{ 'transform': `rotate(${sec * 6}deg)` }}></div>
                        </div>
                        <h4>{hour}:{minutes}</h4>
                        <p>北京</p>
                    </div>
                    <div className='time_word_style2_list'>
                        <div className='time_word_style2_watch'>
                            <div className="hour" style={{ 'transform': `rotate(${(+hour + (+minutes + +sec / 60) / 60) * 30}deg)` }}></div>
                            <div className="min" style={{ 'transform': `rotate(${(+minutes + +sec / 60) * 6}deg)` }}></div>
                            <div className="sec" style={{ 'transform': `rotate(${sec * 6}deg)` }}></div>
                        </div>
                        <h4>{hour}:{minutes}</h4>
                        <p>北京</p>
                    </div>
                    <div className='time_word_style2_list'>
                        <div className='time_word_style2_watch'>
                            <div className="hour" style={{ 'transform': `rotate(${(+hour + (+minutes + +sec / 60) / 60) * 30}deg)` }}></div>
                            <div className="min" style={{ 'transform': `rotate(${(+minutes + +sec / 60) * 6}deg)` }}></div>
                            <div className="sec" style={{ 'transform': `rotate(${sec * 6}deg)` }}></div>
                            <div className="center" ></div>
                        </div>
                        <h4>{hour}:{minutes}</h4>
                        <p>北京</p>
                    </div>
                </div>
            }
        </div>

    )
}
export default TimeWord